<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <h4>预加载图片的代码模板：</h4>
        <pre>
            // 预加载给定图片
            var img = new Image();
            img.src = 'xxx.png';
            // 直接使用预加载的图片
            var imgNode = document.getElementById('img');
            imgNode.src = 'xxx.png';
        </pre>
        <p>下面示例，为例体现预加载的效果，添加了加载时间监听，方便对比“直接加载”和“使用预加载”图片耗时的时间差。</p>
    </div>
    <div style="border: gray 2px solid;">
        <div style="height: 200px;">
            <img id="img_test" src="" alt="等着图片加载" style="height: 100%;">
        </div>
        <br>
        <button id="btn_load_image">直接加载图片：img103.png</button>
        <br>
        <button id="btn_preload_image">预加载图片：img103_copy.png</button>
        <button id="btn_preview_preload_image">显式预加载的图片：img103_copy.png</button>
    </div>
    <p>理论上，使用预加载好的缓存图片的加载时间，要比直接加载图片的加载时间短的很。</p>
    <p>实际上也有长的时候，但是从概率上讲，还是预加载图片“瞬时加载完毕”的概率大些。</p>
    <p>由于计算机性能和网络速度的提升，其对比效果已经不是很明显，除非是网速慢的站点以及图片较大的情况，效果明显。</p>
    <p>当前示例中，<span style="color: red;">预加载时间基本仅为1ms</span>，时间对比也就是相差30ms左右，肉眼观测不明显。</p>
    <p style="color: red; font-size: larger;">为保证测试之前浏览器没有加载过，请一定清空当前页面的缓存。</p>
    <p>在chrome中，清空当前页面缓存的方式是：长按刷新按钮，点击弹出的<span style="color: red;">“清空缓存并进行硬刷新”</span>按钮。</p>
    <script>
        // 注意：参照物图片和预加载图片是同一图片，后者是前者的拷贝。
        // 普通方式加载图片（参照物图片）
        document.getElementById('btn_load_image')
            .addEventListener('click', function (event) {
                var imgNode = document.getElementById('img_test');
                imgNode.src = 'img103.png';
                var startTime = new Date();
                var endTime = undefined;
                console.log('普通加载图片开始。当前时间：' + startTime.getTime());
                imgNode.onload = function (event) {
                    endTime = new Date();
                    console.log('普通加载图片完成。当前时间：' + endTime.getTime());
                    console.log('普通加载图片。加载耗时' + (endTime.getTime() - startTime.getTime()) + 'ms');
                };
            });
        // 预加载图片到缓存
        document.getElementById('btn_preload_image')
            .addEventListener('click', function (event) {
                var img = new Image();
                img.src = 'img103_copy.png';
                var startTime = new Date();
                var endTime = undefined;
                console.log('预加载图片开始。当前时间：' + startTime.getTime());
                img.onload = function (event) {
                    endTime = new Date();
                    console.log('预加载图片完成。当前时间：' + endTime.getTime());
                    console.log('预加载图片。加载耗时' + (endTime.getTime() - startTime.getTime()) + 'ms');
                };
            });
        // 使用缓存图片直接加载
        document.getElementById('btn_preview_preload_image')
            .addEventListener('click', function (event) {
                var imgNode = document.getElementById('img_test');
                imgNode.src = 'img103_copy.png';
                var startTime = new Date();
                var endTime = undefined;
                console.log('使用缓存预加载图片开始。当前时间：' + startTime.getTime());
                imgNode.onload = function (event) {
                    endTime = new Date();
                    console.log('使用缓存预加载图片完成。当前时间：' + endTime.getTime());
                    console.log('使用缓存预加载图片。加载耗时' + (endTime.getTime() - startTime.getTime()) + 'ms');
                };
            });
    </script>
</body>

</html>